<template>
	<view class="container bg" style="height: 100%;">
		<view class="t">智慧校园</view>
		<view class="t1">体测成绩状态统计，一键看</view>
		<view class="label">
			<view class="label-school">哈尔滨学校名称</view>
			<view class="label-type">教师端</view>
		</view>
		<image class="img" src="/static/img/student-head-right.png"></image>

		<view class="menu">
			<view class="menu-cell" @click="goHistory">
				<image src="/static/img/teacher-menu-1.png" />
				<view>数据统计</view>
			</view>
			<view class="menu-cell" @click="goBinding">
				<image src="/static/img/teacher-menu-2.png" />
				<view>关联绑定</view>
			</view>
			<view class="menu-cell" @click="goMsg">
				<image src="/static/img/teacher-menu-3.png" />
				<view>历史通知</view>
			</view>
		</view>

		<view class="record">
			<view class="record-cover">
				<view class="record-title">
					<image class="record-title-ic" src="/static/img/achievement-sprit.png">
						<view class="record-title-name">待通知人数：66</view>
						<view class="record-title-all" @click="goAll">查看全部</view>
						<image class="record-title-arrow" @click="goDetail" src="/static/img/arrow-right.png" />
				</view>
				<view class="record-send">
					一件通知所有未读家长
				</view>
				<view class="list" v-if=" list.length">
					<view class="list-item" v-for="item in list">
						<view class="list-item-name">小夜曲</view>
						<image class="list-item-sex" src="/static/img/ic-sex-0.png"></image>
						<view class="list-item-phone">187567565785</view>
						<view class="list-item-class">3年二班</view>
						<view class="list-item-plan">
							<view class="list-item-plan-name">2025年第一次体测</view>
							<view class="list-item-plan-project">
								<view class="list-item-plan-project-label">
									50米跑
								</view>
								<view class="list-item-plan-project-label">
									立定跳远
								</view>
								<view class="list-item-plan-project-label">
									立定跳远
								</view>
								<view class="list-item-plan-project-label">
									立定跳远
								</view>
							</view>
						</view>
						<view class="list-item-status">未解锁</view>
					</view>
				</view>
				<view v-else class="empty">
					<image src="/static/img/empty.png"></image>
					<view>所有学生成绩家长已解锁</view>
				</view>
			</view>

			<image class="record-label" src="/static/img/teacher-label.png"></image>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				value: 90,
				list: [{
						type: 1,
					}, {
						type: 1
					}, {
						type: 2
					}, {
						type: 2
					},
					{
						type: 2
					}, {
						type: 2
					},
				]
			}
		},

		methods: {
			//全部
			goAll() {
				uni.navigateTo({
					url: '/pages/teacher/lock'
				})
			},
			//历史成绩
			goHistory() {
				uni.navigateTo({
					url: '/pages/student/history'
				})
			},
			//消息
			goMsg() {
				uni.navigateTo({
					url: '/pages/msg/teacher'
				})
			},
			//关联绑定
			goBinding() {
				uni.navigateTo({
					url: '/pages/teacher/binding'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.empty {
		margin-top: 100rpx;
		@include center();
		flex-direction: column;		
		image {
			width: 134rpx;
			height: 82rpx;
		}
		view {
			margin-top: 20rpx;
			font-size: 28rpx;
			color:#666;
		}
	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;

		&-item {
			width: 628rpx;
			border-radius: 20rpx;
			background: #F1FFFC;
			box-sizing: border-box;
			padding: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			&-name {
				font-weight: bold;
				font-size: 32rpx;
				color: #1A1A1A;
			}

			&-sex {
				position: absolute;
				left: 180rpx;
				top: 26rpx;
				width: 32rpx;
				height: 32rpx;

			}

			&-phone {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #1A1A1A;
			}

			&-class {
				position: absolute;
				right: 40rpx;
				top: 70rpx;
				color: #666;
				font-size: 28rpx;
			}

			&-status {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				padding: 4rpx 30rpx;
				border-radius: 0px 20rpx 0px 20rpx;
				background: linear-gradient(90deg, #FFD26F 0%, #FFA100 100%);
				color: #fff;

			}

			&-plan {
				margin-top: 16rpx;
				border-radius: 8px;
				padding: 12rpx 18rpx;
				box-sizing: border-box;
				background: #FFFFFF;

				&-name {
					color: #1A1A1A;
					font-size: 28rpx;
				}

				&-project {
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;

					&-label {
						width: 180rpx;
						box-sizing: border-box;
						padding: 4rpx 20rpx;
						color: #1A1A1A;
						font-size: 28rpx;
					}
				}
			}

		}
	}

	.label {
		display: flex;

		&-school {
			@include center();
			width: fit-content;
			border-radius: 44rpx;
			padding: 8rpx 28rpx;
			background: rgba(255, 255, 255, 0.4);
			box-sizing: border-box;
			border: 0.8rpx solid #FFFFFF;
			backdrop-filter: blur(4rpx);
			margin-left: 38rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #666;
		}

		&-type {
			@include center();
			width: fit-content;
			border-radius: 44rpx;
			padding: 8rpx 28rpx;
			background: rgba(255, 255, 255, 0.4);
			box-sizing: border-box;
			border: 0.8rpx solid #FFFFFF;
			backdrop-filter: blur(4rpx);
			margin-left: 38rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.record {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		position: relative;

		&-send {
			margin: 20rpx 24rpx;
			width: 628rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background: linear-gradient(90deg, #469FF3 0%, #00BBC8 100%);
			@include center();
			color: #fff;
		}


		&-title {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 24rpx;
			position: relative;

			&-all {
				position: absolute;
				right: 100rpx;
				top: 30rpx;
				color: #666;
				font-size: 26rpx;
			}

			&-arrow {
				position: absolute;
				right: 60rpx;
				top: 34rpx;
				width: 28rpx;
				height: 28rpx;
			}


			&-ic {
				width: 16.58rpx;
				height: 24rpx;
			}

			&-name {
				margin-left: 10rpx;
				width: fit-content;
				color: #1A1A1A;
				font-size: 36rpx;
				width: 460rpx;
				overflow: hidden;
				font-weight: bold;
			}
		}

		&-label {
			top: -20rpx;
			position: absolute;
			left: 18rpx;
			width: 223.84rpx;
			height: 66rpx;
		}

		&-cover {
			min-height: 600rpx;
			width: 676rpx;
			border-radius: 28rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 20rpx 0px rgba(19, 88, 76, 0.1);
		}
	}

	.menu {
		z-index: 1;
		margin-top: 20rpx;
		display: flex;
		margin-left: 35rpx;
		width: 680rpx;
		align-items: center;
		justify-content: space-around;
		height: 184rpx;
		border-radius: 28rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 20rpx 0px rgba(19, 88, 76, 0.1);

		&-cell {
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 72rpx;
				height: 72rpx;
			}

			view {
				margin-top: 16rpx;
				font-size: 32rpx;
				color: #9E9E9E;
			}

			&:active {
				opacity: 0.7;
			}
		}
	}


	.t {
		margin-left: 38rpx;
		font-weight: bold;
		margin-top: 196rpx;
		font-size: 52rpx;
		color: $uni-color-title;
	}

	.t1 {
		margin-left: 38rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		color: $uni-color-title;
	}

	.img {
		position: absolute;
		top: 196rpx;
		right: 38rpx;
		width: 264rpx;
		height: 264rpx;
	}
</style>